<!DOCTYPE html>
<!--suppress ALL -->
<html>
<style>
    #user {
        position: absolute;
        left: 8%;
        top: 30%;
        color: #969696;
    }

    #pass {
        position: absolute;
        left: 8%;
        top: 30%;
        color: #969696;
    }

    #eye1 {
        font-size: 20px;
        position: absolute;
        left: 8%;
        top: 30%;
        color: #281a15;
    }

    #map {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0px;
        bottom: 0px;
        z-index: 0;
        overflow: hidden;
        word-break: break-all;
        background-color: #f1f1f1;
    }

    .center-block {
        position: relative;
        top: 40%;
        margin: 50px;
        transform: translateY(-50%);
        width: 350px;
        height: 500px;
        background-color: #FFFFFF;
        box-shadow: darkgrey 0px 0px 5px 2px;
    }

    hr.style13 {
        height: 10px;
        width: 350px;
        border: 1px;
        color: black;
        box-shadow: 0 10px 10px -10px #8c8b8b inset;
    }

    .style8 {
        color: black;
        padding: 0 5px 0;
        margin: 5px 0;
        line-height: 1px;
        left: 57px;
        border-left: 80px solid black;
        border-right: 80px solid black;
        text-align: center;
    }

    @font-face {
        font-family: 'iconfont';  /* project id 855660 */
        src: url('//at.alicdn.com/t/font_855660_6t9ap5qz85j.eot');
        src: url('//at.alicdn.com/t/font_855660_6t9ap5qz85j.eot?#iefix') format('embedded-opentype'),
        url('//at.alicdn.com/t/font_855660_6t9ap5qz85j.woff') format('woff'),
        url('//at.alicdn.com/t/font_855660_6t9ap5qz85j.ttf') format('truetype'),
        url('//at.alicdn.com/t/font_855660_6t9ap5qz85j.svg#iconfont') format('svg');
    }

    #iconfont1 {
        font-family: "iconfont" !important;
        font-size: 23px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale;
        color: #e05244;
    }

    @font-face {
        font-family: 'iconfont';  /* project id 855658 */
        src: url('//at.alicdn.com/t/font_855658_6enjl45ttj9.eot');
        src: url('//at.alicdn.com/t/font_855658_6enjl45ttj9.eot?#iefix') format('embedded-opentype'),
        url('//at.alicdn.com/t/font_855658_6enjl45ttj9.woff') format('woff'),
        url('//at.alicdn.com/t/font_855658_6enjl45ttj9.ttf') format('truetype'),
        url('//at.alicdn.com/t/font_855658_6enjl45ttj9.svg#iconfont') format('svg');
    }

    #iconfont2 {
        font-family: "iconfont" !important;
        font-size: 25px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale;
        color: #00bb29;
    }

    @font-face {
        font-family: 'iconfont';  /* project id 855662 */
        src: url('//at.alicdn.com/t/font_855662_k0hvnhd1crk.eot');
        src: url('//at.alicdn.com/t/font_855662_k0hvnhd1crk.eot?#iefix') format('embedded-opentype'),
        url('//at.alicdn.com/t/font_855662_k0hvnhd1crk.woff') format('woff'),
        url('//at.alicdn.com/t/font_855662_k0hvnhd1crk.ttf') format('truetype'),
        url('//at.alicdn.com/t/font_855662_k0hvnhd1crk.svg#iconfont') format('svg');
    }

    #iconfont3 {
        font-family: "iconfont" !important;
        font-size: 23px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale;

        color: #498ad5;
    }

    a.one:link {
        text-decoration: none;
    }

    /* unvisited link */
    a.one:visited {
        text-decoration: none;
    }

    /* visited link */
    a.one:hover {
        text-decoration: none;
    }

    /* mouse over link */
    a.one:active {
        text-decoration: none;
    }

    /* selected link */
    a.two:link {
        text-decoration: none;
    }

    /* unvisited link */
    a.two:visited {
        text-decoration: none;
    }

    /* visited link */
    a.two:hover {
        text-decoration: none;
    }

    /* mouse over link */
    a.two:active {
        text-decoration: none;
    }

    /* selected link */
</style>
<head>
    <title>登录 - 风流</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function () {
            $("#register").click(function () {
                document.location.href = 'https://lhy1999.gitee.io/project_page/register.html';
            });
            $("#eye1").click(function () {
                state = $("#eye1").attr("state");
                if (state == "false") {
                    $("#eye1").attr("state","true");
                    $("#eye1").css("color","#969696");
                    $("#password").attr("type", "text");
                } else {
                    $("#eye1").attr("state","false");
                    $("#eye1").css("color","#281a15");
                    $("#password").attr("type", "password");
                }
            });
        });

        function checkAccount() {
            var usernumber = $("#username").val();
            realJsonInfo = localStorage.getItem(usernumber);
            if (realJsonInfo != null) {
                realJsonObj = JSON.parse(realJsonInfo);
                realPassword = realJsonObj.password;
                var userpassword = $("#password").val();
                if (realPassword == userpassword) {
                    document.location.href = 'https://lhy1999.gitee.io/project_page/success.html?' + usernumber + '=' + realPassword;
                    return false;
                    //跳转链接
                } else {
                    alert("密码错误！");
                }
            } else {
                alert("用户名不正确");
            }
        };
    </script>
    <!-- 引入 Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!--<link rel="shortcut icon" href="fengliu.ico"/>-->
    <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div id="map">
    <div class="center-block">
        <form class="form-horizontal" role="form">
            <h1 class="text-center"
                style="font-family: 华文行楷,serif;color:#0084ff;font-size:60px;position: absolute;top: 10px;left: 15%; ">
                信通风流</h1>
            <hr class="style13" style="position: absolute;top: 20%;">
            <a class="one"
               style=" position:absolute; top: 27%; left: 28%; font-family:  -apple-system;font-size: 18px;color: #ea6f5a;border-bottom: 2px solid;font-weight: 700;">登录</a>
            <b style="position:absolute; left: 45%; top: 25%; color: #ea6f5a;font-size: 18px;font-weight: 800;padding: 10px;">·</b>
            <a id="register" class="two"
               style="position:absolute; top: 27%; left: 60%; font-family:  -apple-system;font-size: 18px;color: #969696;font-weight: 700;">注册</a>
            <div class="form-group">
                <div class="col-md-10 " style=" position: absolute; top: 200px;left: 30px;border-radius: 0; ">
                    <input type="text" required="required" class="form-control" id="username" placeholder="账户名"
                           style="text-indent:12px;width: 250px;height: 40px;margin-bottom: 0;background-color: #f1f1f1; border-radius: 0;box-shadow: inset -1px 1px 0 0 darkgrey ,inset 1px 0 0 0 darkgrey;">
                    <span class="glyphicon glyphicon-user" id="user"></span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-10 " style=" position: absolute; top: 240px;left: 30px;border-radius: 0;">
                    <input type="password" required="required" class="form-control" id="password" placeholder="密码"
                           style="text-indent:12px;width: 250px;height: 40px;margin-bottom: 0;background-color: #f1f1f1; border-radius: 0;border-top: 0;box-shadow: inset -1px -1px 0 0 darkgrey ,inset 1px 0 0 0 darkgrey; ">
                    <span class="glyphicon glyphicon-eye-open" state="false" id="eye1"
                          style=" position: absolute; left: 80%;"></span>
                    <span class="glyphicon glyphicon-pencil" id="pass"></span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-10" style=" position: absolute; top: 283px;left: 12% ;border-radius: 0;">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" style=" size: B5;">
                        </label>
                    </div>
                </div>
            </div>
            <a style="position: absolute;top: 290px; left: 20%; font-family: 楷体,serif;  font-size: 15px; color: black">记住我</a>
            <div class="form-group">
                <div class="forgetNumber" style=" position: absolute; top: 290px;left: 65%;border-radius: 0;">
                    <p style="font-family: 楷体,serif;  font-size: 14px; color: black;font-style: italic;">忘记密码?</p>
                </div>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-default" onclick="return checkAccount()"
                        style=" width:250px; position: absolute; left: 13%;top: 330px;border-top-right-radius: 25px; border-top-left-radius: 25px;border-bottom-left-radius: 25px;border-bottom-right-radius: 25px;color: #FFFFFF;background-color: #3db922;">
                    登录
                </button>

            </div>
            <div class="style8" style="position: absolute;top: 82%; font-family: 楷体,serif;">其他方式</div>
            <i class="pic1" style=" position:absolute; top:89%; left: 20%; " id="iconfont1">&#xe65e;</i>
            <i class="pic2" style=" position:absolute; top:89%; left: 45% " id="iconfont2">&#xe620;</i>
            <i class="pic3" style=" position:absolute; top:89%; left: 70% " id="iconfont3">&#xe666;</i>
        </form>
    </div>
</div>
</body>
</html>
